<template>
    <div>
        <h2 style="color: red;">{{name}}</h2>
        <VoSchemaForm ref="sf" :model="model" :schema="schema" :rules="rules">
            <template #footer>
                <span></span>
            </template>
        </VoSchemaForm>
        <div class="dialog-footer">
            <span>我是子组件的内容</span>
            <el-button @click="close(false)">取消</el-button>
            <el-button type="primary" @click="confirm()">确定</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        name: String
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name: {
                        widget: 'input',
                        label: '姓名',
                    },
                    sex: {
                        widget: 'input',
                        label: '年龄',
                    }
                }
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        close(data) {
            // this.$parent.visible = false
            // or
            this.$emit('on-close', data)
        },
        confirm() {
            this.$refs.sf.validate((valid) => {
                if (valid) {
                    this.close(this.model)
                }
            })
        },
        save(resolve) {
            this.$refs.sf.validate((valid) => {
                if (valid) {
                    // this.close(this.model)
                    setTimeout(() => {
                        resolve && resolve(true)
                    }, 2000)
                } else {
                    resolve && resolve(false)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: right;
}
</style>
